<template>
	<div
		:tabindex="disabled?-1:0"
		:class="classes()"
		:style="{
			fontSize:toCssLength(size),
			color,
		}"
		@click="clickFn"
	>
		<div class="pf-Toggle_circle"><div/></div>
		<template v-if="activeStatus()">
			<div
				v-if="activeText||$slots.open"
				class="pf-Toggle_open"
			><slot name="open">{{activeText}}</slot></div>
		</template>
		<template v-else>
			<div
				v-if="inactiveText||$slots.close"
				class="pf-Toggle_close"
			><slot name="close">{{inactiveText}}</slot></div>
		</template>
	</div>
</template>

<script setup lang="ts">
import type {
	BeforeProcessor,
} from '../../../type';
import {toCssLength} from '../../../util';
import useStateToggle from '../../../composables/useStateToggle';
/**
 * 开关组件
 * @author 唐国雄
 * @date 2022/11/16
 * 属性----------------------
 * v-model			当前值
 * :active			手动控制是否打开
 * :before-change	切换前置处理器
 * :name			唯一键, 组合使用时必需
 * :active-text		打开时文字
 * :inactive-text	关闭时文字
 * :true-value		打开时的值(单独使用时)
 * :false-value		关闭时的值(单独使用时)
 * :color			颜色
 * :size			大小
 * :disabled		禁用状态
 * 事件----------------------
 * @update:modelValue	值变化
 * @active				打开(组合使用时)
 * @inactive			关闭(组合使用时)
 * 插槽----------------------
 * #open			打开时内容
 * #close			关闭时内容
 */
const emit=defineEmits<{
	(e:'update:modelValue',val:any):void;
	(e:'active',val:any):void;
	(e:'inactive',val:any):void;
}>();
const props=withDefaults(defineProps<{
	modelValue?:any;
	active?:boolean|null;
	beforeChange?:BeforeProcessor<any>;
	name?:any;
	activeText?:string;
	inactiveText?:string;
	trueValue?:any;
	falseValue?:any;
	color?:string;
	size?:string|number;
	disabled?:boolean;
}>(),{
	active:null,
	trueValue:true,
	falseValue:false,
});
//region 状态切换
const {
	activeStatus,
	clickFn,
}=useStateToggle({
	key(){
		return props.name;
	},
	value(){
		return props.modelValue;
	},
	active(){
		return props.active;
	},
	disabled(){
		return props.disabled;
	},
	aloneActive(val):boolean{
		return props.trueValue===val;
	},
	beforeChange:props.beforeChange,
	aloneValue(active){
		return active
			?props.falseValue
			:props.trueValue;
	},
	emit,
});
//endregion
//region 类名
const classes=() => {
	return 'pf-Toggle'+
		(activeStatus()?' pf--active':'')+
		(props.disabled?' pf--disabled':'');
};
//endregion
</script>

<script lang="ts">
export default {};
</script>